<template>
  <div class="container">
    <div class="phoneTop"></div>
    <div class="content">
      <div class="phonerej">
        <h3>
          <i class="iconLeftym"></i>
          <i class="iconcgyq"></i>
          <i class="iconRightym"></i>
        </h3>
        <div class="items">
          <i class="iconphone"></i>
          <input type="tel" maxlength="11" v-model="phone" placeholder="请输入手机号码">
        </div>
        <a href="javascript:;" class="btnx" @click="clickPhone">立即领取</a>
      </div>
    </div>
    <div class="pub" v-if="pubclick">
      <div class="lingqu">
        <span class="close" @click="pubclick = false"></span>
        <div class="btns">
          <a href="javascript:;">
            <i class="iconIos"></i>
            <span>Ios版下载</span>
          </a>
          <a href="javascript:;">
            <i class="iconAndroid"></i>
            <span>Android版下载</span>
          </a>
        </div>
      </div>
    </div>
    <div class="pub2" v-if="publlq">
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      pubclick:false,
      publlq:false,
      phone: '',
      indexCode: this.$route.query.code
    }
  },
  mounted () {
    document.title = '好友邀请';
  },
  methods: {
    /**
     * @deprecated 文字裁剪(将被裁剪的文字，裁剪后的字数)
     * @param text
     * @param sum
     * @returns {string}
     */
    textCut (text, sum) {
      var ar = ''
      for(var i=0; i<text.length; i++){
        if (i<sum) {
          ar += text[i]
        }
      }
      return ar+'…'
    },
    clickPhone () {
      if (!this.isphone(this.phone)) {
        this.$tipMessage('请输入正确的手机号码');
        return
      } else {
        // 邀请登记
        this.$fetch({
          url: '/crm/invite',
          method: 'POST',
          data: {
            code: this.indexCode,
            phone: this.phone
          },
          isResolve: false
        }).then(res => {
          if (res.code === 200) {
            this.pubclick = true
          } else {
            this.$tipMessage(res.message);
          }
        }).catch(res => {
          this.$tipMessage(res.message);
        })
      }
    },
    isphone (data) {
      var myReg = /^1[3456789]\d{9}$/;
      var tel = data;
      if (!myReg.test(tel)) {
        return false
      }else{
        return true
      }
    }
  }
}
</script>
<style scoped lang='less' type="text/less" rel="stylesheet/less">
.yt-textEll{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.iconLeftym{
  display: inline-block;
  width: .37rem;
  height: .53rem;
  background: url("../../assets/image/leftym.png") no-repeat 0 0;
  background-size: 100%;
}
.iconRightym{
  display: inline-block;
  width: .37rem;
  height: .53rem;
  background: url("../../assets/image/rightym.png") no-repeat 0 0;
  background-size: 100%;
}
.iconcgyq{
  display: inline-block;
  width: 2.82rem;
  height: .88rem;
  background: url("../../assets/image/cgyq.png") no-repeat 0 0;
  background-size: 100%;
}
.iconIos{
  display: block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/iconioos.png") no-repeat 0 0;
  background-size: 100%;
}
.iconAndroid{
  display: block;
  width: .4rem;
  height: .4rem;
  background: url("../../assets/image/iconandroid.png") no-repeat 0 0;
  background-size: 100%;
}
.container{
  background: #ce3331;
  position: absolute;
  top:-.02rem;
  left: 0;
  bottom: 0;
  right: 0;
}
.phoneTop{
  width: 7.5rem;
  height: 7rem;
  background: url("../../assets/image/phonebg.png") no-repeat 0 0;
  background-size: 100%;
}
.content{
  padding: 0 .32rem;
  .phonerej{
    background: #fff;
    border-radius: .08rem;
    margin-top: -.25rem;
    padding: .32rem .24rem .82rem .24rem;
    h3{
      display: flex;
      justify-content: center;
      i{
        margin: 0 .12rem;
      }
    }
    .items{
      font-size: .28rem;
      margin-top: .7rem;
      width: 6.38rem;
      height: .88rem;
      background: rgb(244,244,244);
      display: flex;
      .iconphone{
        display: block;
        width: .86rem;
        height: .88rem;
        background: url("../../assets/image/phone.png") no-repeat center;
        background-size: .32rem .32rem;
      }
      input{
        background: rgb(244,244,244);
        height: .88rem;
        width: 5rem;
        border: none;
        padding: 0 .1rem;
        font-size: .28rem;
        &:active{
          border: none;
        }
      }
    }
    .btnx{
      margin-top: .48rem;
      display: block;
      width: 6.38rem;
      height: .88rem;
      background: #f13535;
      border-radius: .08rem;
      font-size: .32rem;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
      text-align: center;
      line-height: .88rem;
    }
  }
}
.pub{
  position: fixed;
  left:0;
  bottom: 0;
  right:0;
  top:0;
  background: rgba(0,0,0,.5);
  .lingqu{
    width: 6rem;
    height: 8rem;
    position: absolute;
    left:0;
    bottom: 0;
    right:0;
    top:0;
    margin: auto;
    background: #fff url('../../assets/image/puptop.png') no-repeat 0 0;
    background-size: 100%;
    border-radius: .16rem;
    .close{
      width: .44rem;
      height: .44rem;
      position: absolute;
      left:-.22rem;
      top:-.22rem;
      background: url("../../assets/image/close.png") no-repeat 0 0;
      background-size: 100%;
    }
    .btns{
      margin-top: 5.17rem;
      font-size: .28rem;
      a{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 5.38rem;
        height: .8rem;
        line-height: .8rem;
        background: #f13535;
        font-size: .28rem;
        text-align: center;
        text-decoration: none;
        color: #fff;
        border-radius: .08rem;
        i{
          margin-right: .23rem;
        }
        &:nth-child(2){
          margin-top: .48rem;
        }
      }
    }
  }
}
.pub2{
  position: fixed;
  left:0;
  bottom: 0;
  right:0;
  top:0;
  background: url("../../assets/image/llqdk.png") no-repeat 0 0;
  background-size: 100% 100%;
}
</style>
